<template>
    <div class="add-role-container" style="margin-top: 1px;">
        <div class="form-wrapper">
            <h2 class="form-title">添加角色</h2>
            
            <el-form :model="form" label-width="120px" class="role-form">
                <el-form-item label="角色名称:">
                    <el-input 
                        v-model="form.roleName" 
                        placeholder="请输入角色名称"
                        clearable
                        style="width: 100%;"
                    />
                </el-form-item>

                <el-form-item label="选择权限:">
                    <el-checkbox-group v-model="form.pessionName" class="permission-group">
                        <div class="permission-row">
                            <el-checkbox label="试题管理">试题管理</el-checkbox>
                            <el-checkbox label="考试">考试</el-checkbox>
                        </div>
                        <div class="permission-row">
                            <el-checkbox label="查看成绩">查看成绩</el-checkbox>
                            <el-checkbox label="成绩分析">成绩分析</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item class="button-group">
                    <el-button type="primary" @click="onSubmit" class="save-btn">
                        <el-icon><Check /></el-icon>
                        保存
                    </el-button>
                    <el-button @click="goBack" class="return-btn">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Check, ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { xieInfo } from '@/Http/axiosInfo'

const router = useRouter()

const form = reactive({

    roleName: '',
    pessionName: <any>[]
})

const onSubmit = () => {
    // 验证必填字段
    if (!form.roleName.trim()) {
        ElMessage.error('请输入角色名称')
        return
    }
    
    if (form.pessionName.length === 0) {
        ElMessage.error('请至少选择一个权限')
        return
    }

    console.log('提交的角色数据:', form)
    form.pessionName = form.pessionName.join(',')
    // 这里可以添加API调用
    xieInfo.post('/MngRole/AddRole', {
        role:form,
    })
    .then((res) => {
        console.log('添加角色成功:', res)
        ElMessage.success('添加角色成功')
        // 处理成功逻辑
    })
    .catch((err) => {
        console.error('添加角色失败:', err)
        // 处理失败逻辑
    })
   
    
    // 重置表单
    form.roleName = ''
    form.pessionName = []
}

const goBack = () => {
    router.back()
}
</script>

<style scoped>
.add-role-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.form-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 600px;
    position: relative;
}

.form-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #8B4513;
    border-radius: 4px 0 0 4px;
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 30px 0;
    text-align: center;
}

.role-form {
    width: 100%;
}

.permission-group {
    width: 100%;
}

.permission-row {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
}

.permission-row:last-child {
    margin-bottom: 0;
}

.button-group {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.save-btn,
.return-btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.save-btn {
    background-color: #409eff;
    border-color: #409eff;
    color: white;
}

.save-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.return-btn {
    background-color: #f4f4f5;
    border-color: #d3d4d6;
    color: #606266;
}

.return-btn:hover {
    background-color: #e9e9eb;
    border-color: #c0c4cc;
}

:deep(.el-form-item__label) {
    font-weight: 500;
    color: #333;
}

:deep(.el-input__wrapper) {
    border-radius: 6px;
}

:deep(.el-checkbox) {
    margin-right: 0;
}

:deep(.el-checkbox__label) {
    font-size: 14px;
    color: #333;
}
</style>
